/**
 * 添加 编辑车道
 * @author xiaoxujs
 */

import { Form, Input, message, Modal } from "antd";
import { FC, useEffect } from "react";
import { IBaseLaneList, IBaseLaneListChangeForm } from "../../../../type/chedaoweihu";
import {postBaseLaneEdit } from "../../api";

const ChedaoChangeModule: FC<{
  open: boolean;
  clickData?: IBaseLaneList;
  handleCallback: () => void;
}> = ({
  open,
  clickData,
  handleCallback
}) => {
    const [form] = Form.useForm<IBaseLaneListChangeForm>();
    const { validateFields, resetFields, setFieldsValue } = form;

    useEffect(() => {

      if (clickData) {
        setFieldsValue({
          oldName: clickData.laneName
        })
      }
      return () => {

      }
    }, [clickData, setFieldsValue])


    const handleOk = async () => {
      const values = await validateFields();
      if (clickData) {
        const params = {
          id: clickData.id,
          laneName: values.laneName
        }
        const { code, msg } = await postBaseLaneEdit(params) as { code: number, msg: string };
        if (code === 20000) {
          resetFields()
          handleCallback();
        } else {
          message.error(msg)
        }
      }

    };

    const handleCancel = () => {
      resetFields()
      handleCallback()
    };
    return <Modal title='编辑车道名称' open={open} onOk={handleOk} onCancel={handleCancel}>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        form={form}
      >
        <Form.Item<IBaseLaneListChangeForm>
          label="原车道名称"
          name="oldName"
          rules={[{ required: true, message: ' 请输入原车道名称' }]}
        >
          <Input disabled />
        </Form.Item>
        <Form.Item<IBaseLaneListChangeForm>
          label="修改为"
          name="laneName"
          rules={[{ required: true, message: '请输入车道名称!' }]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  }

export default ChedaoChangeModule;